今天我們試著使用React router dom中的Link 跟useParams
react-router-dom 中的 Link 组件用於在React 應用程式中建立連結，以導航到不同的路由。

例如這裡的<Link to="/">Home</Link>是一個使用Link元件的連結，將用戶導向應用程式的首頁（"/"路徑）

<div className="links">
        <Link to="/">Home</Link>
        <Link to="/create" style={{ 
          color: 'white', 
          backgroundColor: '#f1356d',
          borderRadius: '8px' 
        }}>New Blog</Link>
      </div>

Route Parameters(路由參數)是 React 路由中的一種概念，可以在路由中傳遞變數或參數，通常用來識別特定資源，

例如我們設定路由中的id成不同的值，來分別現在fetch的資料是哪一筆，應該render到哪個網頁

可以使用 React router dom裡面的useParams hook 來獲取路由參數的值，以提供後續其他程式碼去使用。

這裡先使用useParams抓到特定的id，再使用 Link 元件來建立連結到特定部落格的連結，去渲染不同的blog資料。

const BlogDetails = () => {
  const { id } = useParams();
  const { data: blog, error, isPending } = useFetch('http://localhost:8000/blogs/' + id);

  return (
    <div className="blog-details">
      { isPending && <div>Loading...</div> }
      { error && <div>{ error }</div> }
      { blog && (
        <article>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
          <div>{ blog.body }</div>
        </article>
      )}
    </div>
  );
}
 
export default BlogDetails;

參考資料

Net ninja